<template>
  <div>
    <el-container>
      <el-header>
        <el-row
          ><el-col :span="4"> 客户信息管理 </el-col
          ><el-col :span="6" :offset="13">
            维护客户信息，记录客户联系电话和交往记录
          </el-col></el-row
        >
      </el-header>
      <el-main>
        <el-button
          icon="el-icon-refresh-right"
          circle
          @click="cxsx()"
        ></el-button>
        <el-button
          icon="el-icon-search"
          @click="dialogVisibleselect = true"
          circle
        ></el-button>
        <el-table
          :data="tableData"
          @row-click="hang"
          style="width: 100%"
          border
          stripe
        >
          <el-table-column
            prop="CusID"
            label="客户编号"
            width="auto"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="CusName"
            label="客户名称"
            width="auto"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="CusDate"
            label="建立时间"
            width="auto"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ operatingTime(scope.row.CusDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="UserLName"
            label="客户经理"
            width="auto"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width="auoto" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="xg(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row>
          <el-col :span="1">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rows"
            >
            </el-pagination>
          </el-col>
        </el-row>
        <!--联系人-->
        <el-tabs v-model="url">
          <el-tab-pane label="联系人" name="second">
            <div :style="divzx">
              <el-button
                icon="el-icon-plus"
                circle
                @click="dialogVisibleinsert = true"
              ></el-button>
            </div>
            <el-table :data="tableData1" style="width: 100%" border stripe>
              <el-table-column
                prop="LMName"
                label="姓名"
                width="auto"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="LMSex"
                label="性别"
                width="auto"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="LMDuty"
                label="职位"
                width="auto"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="LMOfficeNo"
                label="固定电话"
                width="auto"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="LMMobileNo"
                label="手机号码"
                width="auto"
                align="center"
              >
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" @click="cz(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="delt(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!--交往信息-->
          <el-tab-pane label="交往信息" name="third">
            <div :style="divzx">
              <el-button
                icon="el-icon-plus"
                circle
                @click="jdialogVisibleinsert = true"
              ></el-button>
            </div>
            <el-table :data="tableData2" style="width: 100%" border stripe>
              <el-table-column
                prop="ActDate"
                label="时间"
                width="auto"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ operatingTime(scope.row.ActDate) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ActAdd"
                label="地点"
                width="auto"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="ActTitle"
                label="概要"
                width="auto"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="ActDesc"
                label="描述"
                width="auto"
                align="center"
              >
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" @click="jcz(scope.row)"
                    >编辑</el-button
                  >
                  <el-button size="mini" type="danger" @click="jdelt(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <!--客户信息修改-->
    <el-dialog
      title="客户信息编辑"
      :visible.sync="dialogVisibleUpdate"
      width="50%"
    >
      <el-form
        ref="formUpdate"
        :model="formUpdate"
        :rules="formruleUpdate"
        label-width="115px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户编号:">
              <el-col :span="14">
                <span>{{ this.formUpdate.CusID }}</span>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户经理:">
              <el-col :span="5">
                <span>{{ this.formUpdate.UserLName }}</span>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="CusName">
              <el-input v-model="formUpdate.CusName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮政编码" prop="CusZip">
              <el-input v-model="formUpdate.CusZip"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="地址" prop="CusAddress">
              <el-input v-model="formUpdate.CusAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传真" prop="CusFax">
              <el-input v-model="formUpdate.CusFax"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Email" prop="CusWebsite">
              <el-input v-model="formUpdate.CusWebsite"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="营业执照注册号" prop="CusLicenceNo">
              <el-input v-model="formUpdate.CusLicenceNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人" prop="CusChieftain">
              <el-input v-model="formUpdate.CusChieftain"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册资金" prop="CusBankroll">
              <el-input v-model="formUpdate.CusBankroll"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年营销额" prop="CusTurnover">
              <el-input v-model="formUpdate.CusTurnover"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户银行" prop="CusBank">
              <el-input v-model="formUpdate.CusBank"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账号" prop="CusBankNo">
              <el-input v-model="formUpdate.CusBankNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地税登记号" prop="CusLocalTaxNo">
              <el-input v-model="formUpdate.CusLocalTaxNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国税登记号" prop="CusNationalTaxNo">
              <el-input v-model="formUpdate.CusNationalTaxNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间:">
              <el-col :span="17">
                <span>{{ this.formUpdate.CusDate }}</span>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
        <el-button type="primary" @click="xgz('formUpdate')">确 定</el-button>
      </span>
    </el-dialog>
    <!--客户查询-->
    <el-dialog
      title="客户信息查询"
      :visible.sync="dialogVisibleselect"
      width="50%"
    >
      <el-form ref="formselect" :model="formselect" label-width="80px">
        <el-form-item label="客户名称" prop="CusName">
          <el-input v-model="formselect.CusName"></el-input>
        </el-form-item>
        <el-form-item label="客户编号" prop="CusID">
          <el-input v-model="formselect.CusID"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="mhcx('formselect')">确 定</el-button>
      </span>
    </el-dialog>
    <!--联系人添加-->
    <el-dialog
      title="联系人添加"
      :visible.sync="dialogVisibleinsert"
      width="50%"
    >
      <el-form
        ref="forminsert"
        :model="forminsert"
        :rules="formruleinsert"
        label-width="80px"
      >
        <el-col :span="12">
          <el-form-item label="姓名" prop="LMName">
            <el-input v-model="forminsert.LMName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职业" prop="LMDuty">
            <el-input v-model="forminsert.LMDuty"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="LMMobileNo">
            <el-input v-model="forminsert.LMMobileNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="LMSex" style="width: 100%">
            <el-radio v-model="forminsert.LMSex" label="男">男</el-radio>
            <el-radio v-model="forminsert.LMSex" label="女">女</el-radio>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="固定电话" prop="LMOfficeNo">
            <el-input v-model="forminsert.LMOfficeNo"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="LMMemo">
            <el-input type="textarea" v-model="forminsert.LMMemo"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="intr('forminsert')">确 定</el-button>
      </span>
    </el-dialog>
    <!--联系人修改-->
    <el-dialog title="联系人修改" :visible.sync="dialogVisibleUpd" width="50%">
      <el-form
        ref="formUpd"
        :model="formUpd"
        :rules="formruleUpd"
        label-width="80px"
      >
        <el-col :span="12">
          <el-form-item label="姓名:" prop="LMName">
            <el-input v-model="formUpd.LMName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职业" prop="LMDuty">
            <el-input v-model="formUpd.LMDuty"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="LMMobileNo">
            <el-input v-model="formUpd.LMMobileNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别:" prop="LMSex">
            <el-radio v-model="formUpd.LMSex" label="男">男</el-radio>
            <el-radio v-model="formUpd.LMSex" label="女">女</el-radio>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="固定电话" prop="LMOfficeNo">
            <el-input v-model="formUpd.LMOfficeNo"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="LMMemo">
            <el-input type="textarea" v-model="formUpd.LMMemo"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleUpd = false">取 消</el-button>
        <el-button type="primary" @click="upxg('formUpd')">确 定</el-button>
      </span>
    </el-dialog>
    <!--交往添加-->
    <el-dialog
      title="交往记录添加"
      :visible.sync="jdialogVisibleinsert"
      width="50%"
    >
      <el-form
        ref="jforminsert"
        :model="jforminsert"
        :rules="jformruleinsert"
        label-width="100px"
      >
        <el-col :span="12">
          <div class="block">
            <el-form-item label="交往时间" prop="ActDate">
              <el-date-picker
                v-model="jforminsert.ActDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交往地点" prop="ActAdd">
            <el-input v-model="jforminsert.ActAdd"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="概要" prop="ActTitle">
            <el-input v-model="jforminsert.ActTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="ActMemo">
            <el-input v-model="jforminsert.ActMemo"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="详细描述" prop="ActDesc">
            <el-input type="textarea" v-model="jforminsert.ActDesc"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="jdialogVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="jintr('jforminsert')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--交往修改-->
    <el-dialog
      title="交往记录修改"
      :visible.sync="jdialogVisibleUpd"
      width="50%"
    >
      <el-form
        ref="jformUpd"
        :model="jformUpd"
        :rules="jformruleUpd"
        label-width="100px"
      >
        <el-col :span="12">
          <div class="block">
            <el-form-item label="交往时间" prop="ActDate">
              <el-date-picker
                v-model="jformUpd.ActDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交往地点" prop="ActAdd">
            <el-input v-model="jformUpd.ActAdd"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="概要" prop="ActTitle">
            <el-input v-model="jformUpd.ActTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="ActMemo">
            <el-input v-model="jformUpd.ActMemo"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="详细描述" prop="ActDesc">
            <el-input type="textarea" v-model="jformUpd.ActDesc"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="jdialogVisibleUpd = false">取 消</el-button>
        <el-button type="primary" @click="jupxg('jformUpd')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  khfy,
  khxgz,
  khmhc,
  lxrc,
  khlxr,
  lxrtj,
  dellxr,
  uplxr,
  getjw,
  getjwc,
  insejw,
  upjw,
  dejw,
} from "../http/user.js";
import qs from "qs";
export default {
  data() {
    return {
      divzx: "display: none;",
      url: "",
      //每页显示数
      pageSize: 3,
      //当前页
      currentPage: 1,
      //总行数
      rows: 1,
      bol: false,
      //分页查询的数据
      tableData: [],
      //联系人数据
      tableData1: [],
      //交往数据
      tableData2: [],
      dialogVisibleUpdate: false,
      dialogVisibleselect: false,
      dialogVisibleinsert: false,
      dialogVisibleUpd: false,
      jdialogVisibleinsert: false,
      jdialogVisibleUpd: false,
      formselect: {
        CusID: "",
        CusName: "",
        LMID: "",
      },
      //客户修改
      formUpdate: {
        CusID: "",
        CusName: "",
        CusAddress: "",
        CusZip: "",
        CusFax: "",
        CusWebsite: "",
        CusLicenceNo: "",
        CusChieftain: "",
        CusBankroll: "",
        CusTurnover: "",
        CusBank: "",
        CusBankNo: "",
        CusLocalTaxNo: "",
        CusNationalTaxNo: "",
      },
      formruleUpdate: {
        CusName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
      },
      //联系人添加
      forminsert: {
        CusID: "",
        LMName: "",
        LMDuty: "",
        LMMobileNo: "",
        LMSex: "",
        LMOfficeNo: "",
        LMMemo: "",
      },
      formruleinsert: {
        LMName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        LMDuty: [{ required: true, message: "请输入职务", trigger: "blur" }],
        LMMobileNo: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        LMSex: [{ required: true, message: "请选择性别", trigger: "blur" }],
      },
      //联系人修改
      formUpd: {
        LMID: "",
        CusID: "",
        LMName: "",
        LMDuty: "",
        LMMobileNo: "",
        LMSex: "",
        LMOfficeNo: "",
        LMMemo: "",
      },
      formruleUpd: {
        LMName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        LMDuty: [{ required: true, message: "请输入职务", trigger: "blur" }],
        LMMobileNo: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        LMSex: [{ required: true, message: "请选择性别", trigger: "blur" }],
      },
      //交往添加
      jforminsert: {
        CusID: "",
        ActDate: "",
        ActAdd: "",
        ActTitle: "",
        ActMemo: "",
        ActDesc: "",
      },
      jformruleinsert: {
        ActDate: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        ActAdd: [{ required: true, message: "请输入地点", trigger: "blur" }],
        ActTitle: [{ required: true, message: "请输入概要", trigger: "blur" }],
      },
      //交往修改
      jformUpd: {
        ActDate: "",
        ActAdd: "",
        ActTitle: "",
        ActMemo: "",
        ActDesc: "",
        ActID: "",
      },
      jformruleUpd: {
        ActDate: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        ActAdd: [{ required: true, message: "请输入地点", trigger: "blur" }],
        ActTitle: [{ required: true, message: "请输入概要", trigger: "blur" }],
      },
    };
  },
  methods: {
    //交往修改
    jupxg(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          upjw(qs.stringify(this.jformUpd))
            .then((res) => {
              console.log(res);
              if (res.Message == "修改数据成功") {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.jshow();
                this.jdialogVisibleUpd = false;
              } else {
                this.jdialogVisibleUpd = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写完整内容",
            type: "error",
          });
        }
      });
    },
    //交往传值
    jcz(row) {
      this.jformUpd.ActDate = row.ActDate;
      this.jformUpd.ActAdd = row.ActAdd;
      this.jformUpd.ActTitle = row.ActTitle;
      this.jformUpd.ActMemo = row.ActMemo;
      this.jformUpd.ActDesc = row.ActDesc;
      this.jformUpd.ActID = row.ActID;
      this.jdialogVisibleUpd = true;
    },
    //交往删除
    jdelt(row) {
      if (confirm("确定删除吗")) {
        dejw({
          params: {
            id: row.ActID,
          },
        })
          .then((res) => {
            if (res.Data == 1) {
              this.$message({
                message: "恭喜你，删除成功",
                type: "success",
              });
              this.jshow();
            }
          })
          .catch((err) => {
            console.info(err);
          });
      }
    },
    //交往添加
    jintr(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          insejw(qs.stringify(this.jforminsert))
            .then((res) => {
              if (res.Message == "添加数据成功") {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.jshow();
                this.jdialogVisibleinsert = false;
              }
            })
            .catch((err) => {
              console.info(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    //联系人修改
    upxg(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          uplxr(qs.stringify(this.formUpd))
            .then((res) => {
              console.log(res);
              if (res.Message == "修改数据成功") {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.show();
                this.dialogVisibleUpd = false;
              } else {
                this.dialogVisibleUpd = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写完整内容",
            type: "error",
          });
        }
      });
    },
    //联系人修改传值
    cz(row) {
      this.formUpd.LMName = row.LMName;
      this.formUpd.LMSex = row.LMSex;
      this.formUpd.LMDuty = row.LMDuty;
      this.formUpd.LMMobileNo = row.LMMobileNo;
      this.formUpd.LMOfficeNo = row.LMOfficeNo;
      this.formUpd.LMMemo = row.LMMemo;
      this.formUpd.LMID = row.LMID;
      this.LMID = row.LMID;
      this.dialogVisibleUpd = true;
    },
    //联系人删除
    delt(row) {
      if (confirm("确定删除吗")) {
        dellxr({
          params: {
            id: row.LMID,
          },
        })
          .then((res) => {
            if (res.Data == 1) {
              this.$message({
                message: "恭喜你，删除成功",
                type: "success",
              });
              this.show();
            }
          })
          .catch((err) => {
            console.info(err);
          });
      }
    },
    //联系人添加
    intr(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          lxrtj(qs.stringify(this.forminsert))
            .then((res) => {
              if (res.Message == "添加数据成功") {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.show();
                this.dialogVisibleinsert = false;
              }
            })
            .catch((err) => {
              console.info(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    //联系人刷新
    show() {
      khlxr({
        params: {
          id: this.forminsert.CusID,
        },
      })
        .then((res) => {
          console.log(res);
          if (this.divzx == "display: none;") {
            this.url = "second";
            this.lxsc();
          } else {
            this.url = "second";
            this.tableData1 = res.Data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //交往刷新
    jshow() {
      getjwc({
        params: {
          id: this.jforminsert.CusID,
        },
      })
        .then((res) => {
          console.log(res);
          if (this.divzx == "display: none;") {
            this.url = "third";
            this.lxsc();
          } else {
            this.url = "third";
            this.tableData2 = res.Data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //行点击事件
    hang(row) {
      this.divzx = "display: block;";
      this.forminsert.CusID = row.CusID;
      this.jforminsert.CusID = row.CusID;
      khlxr({
        params: {
          id: row.CusID,
        },
      })
        .then((res) => {
          console.log(res);
          this.url = "second";
          this.tableData1 = res.Data;
        })
        .catch((err) => {
          console.log(err);
        });
      getjwc({
        params: {
          id: row.CusID,
        },
      })
        .then((res) => {
          console.log(res);
          this.tableData2 = res.Data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //联系人查询
    lxsc() {
      lxrc()
        .then((res) => {
          console.log(res);
          this.tableData1 = res.Data;
        })
        .catch((err) => {
          console.log(err);
        });
      getjw()
        .then((res) => {
          console.log(res);
          this.tableData2 = res.Data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //客户信息模糊
    mhcx() {
      this.bol = true;
      khmhc({
        params: {
          i: this.currentPage,
          j: this.pageSize,
          name: this.formselect.CusName,
          id: this.formselect.CusID,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.Data != null) {
            this.$message({
              message: "查询成功",
              type: "success",
            });
            this.url = "";
            this.lxsc();
            this.divzx = "display: none;";
            this.dialogVisibleselect = false;
            this.tableData = res.Data;
            this.rows = res.Row;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    cxsx() {
      this.divzx = "display: none;";
      this.forminsert.CusID = "";
      this.pd = "false";
      this.sx();
      this.lxsc();
      this.bol = false;
      this.url = "";
    },
    //客户修改
    xgz(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          khxgz(qs.stringify(this.formUpdate))
            .then((res) => {
              console.log(res);
              if (res.Data == 1) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.sx();
                this.dialogVisibleUpdate = false;
              } else {
                this.dialogVisibleUpdate = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写客户名称",
            type: "error",
          });
        }
      });
    },
    //修改传值
    xg(row) {
      this.formUpdate.CusID = row.CusID;
      this.formUpdate.UserLName = row.UserLName;
      this.formUpdate.CusName = row.CusName;
      this.formUpdate.CusAddress = row.CusAddress;
      this.formUpdate.CusZip = row.CusZip;
      this.formUpdate.CusFax = row.CusFax;
      this.formUpdate.CusWebsite = row.CusWebsite;
      this.formUpdate.CusLicenceNo = row.CusLicenceNo;
      this.formUpdate.CusChieftain = row.CusChieftain;
      this.formUpdate.CusBankroll = row.CusBankroll;
      this.formUpdate.CusTurnover = row.CusTurnover;
      this.formUpdate.CusBank = row.CusBank;
      this.formUpdate.CusBankNo = row.CusBankNo;
      this.formUpdate.CusLocalTaxNo = row.CusLocalTaxNo;
      this.formUpdate.CusNationalTaxNo = row.CusNationalTaxNo;
      this.formUpdate.CusDate = row.CusDate;
      this.dialogVisibleUpdate = true;
    },
    //日期格式
    operatingTime(timeDate) {
      return this.$moment(timeDate).format("YYYY-MM-DD");
    },
    //初始分页方法
    sx() {
      khfy({
        params: {
          i: this.currentPage,
          j: this.pageSize,
        },
      })
        .then((res) => {
          console.log(res);
          this.tableData = res.Data;
          this.rows = res.Row;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange: function (val) {
      if (this.bol == false) {
        this.pageSize = val;
        this.sx();
      } else if (this.bol == true) {
        this.pageSize = val;
        this.mhcx();
      }
    },
    handleCurrentChange: function (val) {
      if (this.bol == false) {
        this.currentPage = val;
        this.sx();
      } else if (this.bol == true) {
        this.currentPage = val;
        this.mhcx();
      }
    },
  },
  mounted() {
    this.sx();
    this.lxsc();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  border-radius: 15px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border: solid 5px white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}
.el-col-4 {
  width: 8.33333%;

  font-weight: 900;
}
.el-col-6 {
  width: 37.5%;
  font-size: 1px;
  font-weight: 300;
  color: rgb(83, 83, 83);
}
.el-button.is-circle {
  border-radius: 50%;
  padding: 12px;
  position: relative;
  top: -10px;
  right: -570px;
}
</style>